React experimental_useFormStatus: Shakllarni Kengaytirilgan Boshqarish Bo'yicha To'liq Qo'llanma

            // app/contact-form.jsx (Server Komponenti)
'use server';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Asinxron shakl yuborilishini simulyatsiya qilish
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // Haqiqiy ilovada siz ma'lumotlarni serverga yuborgan bo'lar edingiz
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        Name:
        
      
      

        Email:
        
      
      

        Message:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbnRhY3QtZm9ybS5qc3ggKFNlcnZlciBLb21wb25lbnRpKQondXNlIHNlcnZlcic7CgppbXBvcnQgeyBleHBlcmltZW50YWxfdXNlRm9ybVN0YXR1cyBhcyB1c2VGb3JtU3RhdHVzIH0gZnJvbSAncmVhY3QtZG9tJzsKCmFzeW5jIGZ1bmN0aW9uIGhhbmRsZVN1Ym1pdChmb3JtRGF0YSkgewogICd1c2Ugc2VydmVyJzsKICAvLyBBc2lueHJvbiBzaGFrbCB5dWJvcmlsaXNoaW5pIHNpbXVseWF0c2l5YSBxaWxpc2gKICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHRocm93IG5ldyBFcnJvcignQWxsIGZpZWxkcyBhcmUgcmVxdWlyZWQuJyk7CiAgfQoKICAvLyBIYXFpcWl5IGlsb3ZhZGEgc2l6IG1hJ2x1bW90bGFybmkgc2VydmVyZ2EgeXVib3JnYW4gYm8nbGFyIGVkaW5naXoKICBjb25zb2xlLmxvZygnRm9ybSBkYXRhOicsIHsgbmFtZSwgZW1haWwsIG1lc3NhZ2UgfSk7CgogIHJldHVybiB7IHN1Y2Nlc3M6IHRydWUsIG1lc3NhZ2U6ICdUaGFuayB5b3UgZm9yIHlvdXIgc3VibWlzc2lvbiEnIH07Cn0KCmZ1bmN0aW9uIENvbnRhY3RGb3JtKCkgewogIGNvbnN0IHsgcGVuZGluZywgZGF0YSwgZXJyb3IgfSA9IHVzZUZvcm1TdGF0dXMoKTsKCiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibmFtZSI+TmFtZTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibmFtZSIgbmFtZT0ibmFtZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJlbWFpbCI+RW1haWw6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJlbWFpbCIgbmFtZT0iZW1haWwiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibWVzc2FnZSI+TWVzc2FnZTo8L2xhYmVsPgogICAgICAgIDx0ZXh0YXJlYSBpZD0ibWVzc2FnZSIgbmFtZT0ibWVzc2FnZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCIgZGlzYWJsZWQ9e3BlbmRpbmd9PgogICAgICAgIHtwZW5kaW5nID8gJ1N1Ym1pdHRpbmcuLi4nIDogJ1N1Ym1pdCd9CiAgICAgIDwvYnV0dG9uPgoKICAgICAge2Vycm9yICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAncmVkJyB9fT5FcnJvcjoge2Vycm9yLm1lc3NhZ2V9PC9wPn0KICAgICAge2RhdGE/LnN1Y2Nlc3MgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e2RhdGEubWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IENvbnRhY3RGb3JtOwo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Tushuntirish:</b></p>

<ol>
  <li><b>'use server':</b> Bu direktiva <code>handleSubmit</code> funksiyasini React Server Action sifatida belgilaydi. Server Actions sizga server tomonidagi kodni to'g'ridan-to'g'ri React komponentlaringizdan bajarish imkonini beradi.</li>
  <li><b><code>useFormStatus()</code>:</b> Biz <code>useFormStatus()</code> hookini <code>ContactForm</code> komponenti ichida chaqiramiz. U quyidagi xususiyatlarga ega obyektni qaytaradi:</li>
    <ul>
      <li><code>pending</code>: Shakl hozirda yuborilayotganini ko'rsatuvchi mantiqiy qiymat.</li>
      <li><code>data</code>: Muvaffaqiyatli yuborilgandan so'ng Server Action tomonidan qaytarilgan ma'lumotlar.</li>
      <li><code>error</code>: Agar Server Action xato chiqarsa, xato obyekti.</li>
    </ul>
  <li><b>Shakl Elementlari:</b> Shakl ism, elektron pochta va xabar uchun kiritish maydonlarini o'z ichiga oladi. <code>disabled</code> atributi <code>pending</code> ga o'rnatilgan, bu foydalanuvchining shakl yuborilayotganda u bilan o'zaro ishlashiga to'sqinlik qiladi.</li>
  <li><b>Yuborish tugmasi:</b> <code>pending</code> qiymati `true` bo'lganda yuborish tugmasining matni "Yuborilmoqda..." ga o'zgaradi.</li>
  <li><b>Xato va Muvaffaqiyat Xabarlari:</b> Komponent <code>error</code> mavjud bo'lsa xato xabarini va <code>data.success</code> `true` bo'lsa muvaffaqiyat xabarini ko'rsatadi.</li>
</ol>

<h3><code>useFormStatus</code> tomonidan qaytariladigan xususiyatlar</h3>

<ul>
  <li><b><code>pending</code>:</b> Shakl hozirda yuborilayotganligini ko'rsatuvchi mantiqiy qiymat. Bu yuborish tugmasini o'chirib qo'yish va yuklanish indikatorini ko'rsatish uchun foydalidir.</li>
  <li><b><code>data</code>:</b> Muvaffaqiyatli shakl yuborilganidan so'ng Server Action tomonidan qaytarilgan ma'lumotlar. Bu har qanday seriyalanadigan qiymat bo'lishi mumkin.
  <li><b><code>error</code>:</b> Agar Server Action yuborish paytida istisno chiqargan bo'lsa, xato obyekti. Bu foydalanuvchiga xato xabarlarini ko'rsatish imkonini beradi.</li>
  <li><b><code>action</code>:</b> Chaqirilgan Server Action funksiyasi. Bu joriy holat uchun qaysi harakat mas'ul ekanligini aniqlash uchun foydali bo'lishi mumkin.</li>
  <li><b><code>formState</code>:</b> (Kamroq uchraydi) Shakl bilan bog'liq bo'lgan shakl holati. Bu ayniqsa siz shakl holatini tashqaridan boshqarayotganingizda dolzarbdir.</li>
</ul>

<h2>Kengaytirilgan Foydalanish Holatlari</h2>

<h3>1. Dinamik Xatolarni Qayta Ishlash va Validatsiya</h3>

<p><code>experimental_useFormStatus</code> dinamik xatolarni qayta ishlash va validatsiyani amalga oshirish uchun ishlatilishi mumkin. Masalan, siz <code>error</code> xususiyatini tekshirishingiz va yuz bergan xato turiga qarab maxsus xato xabarlarini ko'rsatishingiz mumkin.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>function ContactForm() {
  const { pending, data, error } = useFormStatus();

  let errorMessage = null;

  if (error) {
    if (error.message === 'All fields are required.') {
      errorMessage = 'Please fill out all the required fields.';
    } else {
      errorMessage = 'An error occurred while submitting the form.';
    }
  }

  return (
    <form action={handleSubmit}>
      {/* ... form fields ... */}

      {errorMessage && <p style={{ color: 'red' }}>Error: {errorMessage}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="ZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyBwZW5kaW5nLCBkYXRhLCBlcnJvciB9ID0gdXNlRm9ybVN0YXR1cygpOwoKICBsZXQgZXJyb3JNZXNzYWdlID0gbnVsbDsKCiAgaWYgKGVycm9yKSB7CiAgICBpZiAoZXJyb3IubWVzc2FnZSA9PT0gJ0FsbCBmaWVsZHMgYXJlIHJlcXVpcmVkLicpIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ1BsZWFzZSBmaWxsIG91dCBhbGwgdGhlIHJlcXVpcmVkIGZpZWxkcy4nOwogICAgfSBlbHNlIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ0FuIGVycm9yIG9jY3VycmVkIHdoaWxlIHN1Ym1pdHRpbmcgdGhlIGZvcm0uJzsKICAgIH0KICB9CgogIHJldHVybiAoCiAgICA8Zm9ybSBhY3Rpb249e2hhbmRsZVN1Ym1pdH0+CiAgICAgIHsvKiAuLi4gZm9ybSBmaWVsZHMgLi4uICovfQoKICAgICAge2Vycm9yTWVzc2FnZSAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3I6IHtlcnJvck1lc3NhZ2V9PC9wPn0KICAgICAge2RhdGE/LnN1Y2Nlc3MgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e2RhdGEubWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>2. Optimistik Yangilanishlar</h3>

<p>Optimistik yangilanishlar, server yuborishni tasdiqlashidan oldin ham, go'yo shakl yuborilishi muvaffaqiyatli bo'ladigandek, UI ni darhol yangilashni o'z ichiga oladi. Bu ilovani yanada sezgir his qildirish orqali foydalanuvchi tajribasini yaxshilashi mumkin. <code>experimental_useFormStatus</code> optimistik ma'lumotlarni kuzatish uchun alohida holat o'zgaruvchisini saqlash orqali optimistik yangilanishlarni boshqarish uchun ishlatilishi mumkin.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>import { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Asinxron shakl yuborilishini simulyatsiya qilish
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // Haqiqiy ilovada siz ma'lumotlarni serverga yuborgan bo'lar edingiz
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Thank you for your submission!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();
  const [optimisticMessage, setOptimisticMessage] = useState('');

  const handleSubmitOptimistic = async (formData) => {
      setOptimisticMessage('Submitting...');
      const result = await handleSubmit(formData); //Server harakatini kutadi.
      if (result?.success){
        setOptimisticMessage(result.message)
      } else {
          setOptimisticMessage("");
      }

  };
  return (
    <form action={handleSubmitOptimistic}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" disabled={pending} />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" disabled={pending} />
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message" disabled={pending} />
      </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {optimisticMessage && <p style={{ color: 'green' }}>{optimisticMessage}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="aW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IGV4cGVyaW1lbnRhbF91c2VGb3JtU3RhdHVzIGFzIHVzZUZvcm1TdGF0dXMgfSBmcm9tICdyZWFjdC1kb20nOwoKYXN5bmMgZnVuY3Rpb24gaGFuZGxlU3VibWl0KGZvcm1EYXRhKSB7CiAgJ3VzZSBzZXJ2ZXInOwogIC8vIEFzaW54cm9uIHNoYWtsIHl1Ym9yaWxpc2hpbmkgc2ltdWx5YXRzaXlhIHFpbGlzaAogIGF3YWl0IG5ldyBQcm9taXNlKChyZXNvbHZlKSA9PiBzZXRUaW1lb3V0KHJlc29sdmUsIDIwMDApKTsKCiAgY29uc3QgbmFtZSA9IGZvcm1EYXRhLmdldCgnbmFtZScpOwogIGNvbnN0IGVtYWlsID0gZm9ybURhdGEuZ2V0KCdlbWFpbCcpOwogIGNvbnN0IG1lc3NhZ2UgPSBmb3JtRGF0YS5nZXQoJ21lc3NhZ2UnKTsKCiAgaWYgKCFuYW1lIHx8ICFlbWFpbCB8fCAhbWVzc2FnZSkgewogICAgdGhyb3cgbmV3IEVycm9yKCdBbGwgZmllbGRzIGFyZSByZXF1aXJlZC4nKTsKICB9CgogIC8vIEhhcWlxaXkgaWxvdmFkYSBzaXogbWEnbHVtb3RsYXJuaSBzZXJ2ZXJnYSB5dWJvcmdhbiBibydsYXIgZWRpbmdpegogIGNvbnNvbGUubG9nKCdGb3JtIGRhdGE6JywgeyBuYW1lLCBlbWFpbCwgbWVzc2FnZSB9KTsKCiAgcmV0dXJuIHsgc3VjY2VzczogdHJ1ZSwgbWVzc2FnZTogJ1RoYW5rIHlvdSBmb3IgeW91ciBzdWJtaXNzaW9uIScgfTsKfQoKZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyBwZW5kaW5nLCBkYXRhLCBlcnJvciB9ID0gdXNlRm9ybVN0YXR1cygpOwogIGNvbnN0IFtvcHRpbWlzdGljTWVzc2FnZSwgc2V0T3B0aW1pc3RpY01lc3NhZ2VdID0gdXNlU3RhdGUoJycpOwoKICBjb25zdCBoYW5kbGVTdWJtaXRPcHRpbWlzdGljID0gYXN5bmMgKGZvcm1EYXRhKSA9PiB7CiAgICAgIHNldE9wdGltaXN0aWNNZXNzYWdlKCdTdWJtaXR0aW5nLi4uJyk7CiAgICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGhhbmRsZVN1Ym1pdChmb3JtRGF0YSk7IC8vU2VydmVyIGhhcmFrYXRpbmkga3V0YWRpLgogICAgICBpZiAocmVzdWx0Py5zdWNjZXNzKXsKICAgICAgICBzZXRPcHRpbWlzdGljTWVzc2FnZShyZXN1bHQubWVzc2FnZSkKICAgICAgfSBlbHNlIHsKICAgICAgICAgIHNldE9wdGltaXN0aWNNZXNzYWdlKCIiKTsKICAgICAgfQoKICB9OwogIHJldHVybiAoCiAgICA8Zm9ybSBhY3Rpb249e2hhbmRsZVN1Ym1pdE9wdGltaXN0aWN9PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJuYW1lIj5OYW1lOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJuYW1lIiBuYW1lPSJuYW1lIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9ImVtYWlsIj5FbWFpbDo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJlbWFpbCIgaWQ9ImVtYWlsIiBuYW1lPSJlbWFpbCIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJtZXNzYWdlIj5NZXNzYWdlOjwvbGFiZWw+CiAgICAgICAgPHRleHRhcmVhIGlkPSJtZXNzYWdlIiBuYW1lPSJtZXNzYWdlIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0IiBkaXNhYmxlZD17cGVuZGluZ30+CiAgICAgICAge3BlbmRpbmcgPyAnU3VibWl0dGluZy4uLicgOiAnU3VibWl0J30KICAgICAgPC9idXR0b24+CgogICAgICB7ZXJyb3IgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdyZWQnIH19PkVycm9yOiB7ZXJyb3IubWVzc2FnZX08L3A+fQogICAgICB7b3B0aW1pc3RpY01lc3NhZ2UgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdncmVlbicgfX0+e29wdGltaXN0aWNNZXNzYWdlfTwvcD59CiAgICA8L2Zvcm0+CiAgKTsKfQoKZXhwb3J0IGRlZmF1bHQgQ29udGFjdEZvcm07Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>3. Fayl Yuklashlar Uchun Progress Ko'rsatkichlari</h3>

<p><code>experimental_useFormStatus</code> to'g'ridan-to'g'ri fayl yuklashlar uchun progress yangilanishlarini taqdim etmasa-da, siz uni progress ko'rsatkichlarini amalga oshirish uchun boshqa usullar bilan birlashtirishingiz mumkin. Masalan, fayl yuklash jarayonini kuzatish va UI ni shunga mos ravishda yangilash uchun <code>FormData</code> API-dan foydalanishingiz mumkin.</p>

<p><b>Eslatma:</b> Bu hook asosan Server Actions bilan birga ishlaganligi sababli, <code>experimental_useFormStatus</code> ning o'zida yuklash jarayoniga to'g'ridan-to'g'ri kirish cheklangan. Siz odatda yuklash jarayonini Server Action kodingiz ichida (muhitga qarab, imkon bo'lsa) boshqarasiz va keyin umumiy shakl yuborish holatini <code>experimental_useFormStatus</code> yordamida aks ettirasiz.</p>

<h2>Global Jihatlar</h2>

<p>Global auditoriya uchun shakllar ishlab chiqayotganda, quyidagilarni hisobga olish muhim:</p>

<ul>
  <li><b>Lokalizatsiya:</b> Barcha shakl yorliqlari, xato xabarlari va muvaffaqiyat bildirishnomalari foydalanuvchining afzal ko'rgan tiliga moslashtirilganligiga ishonch hosil qiling. Tarjimalarni samarali boshqarish uchun internatsionalizatsiya (i18n) kutubxonalari va freymvorklaridan foydalaning.</li>
  <li><b>Sana va Raqam Formatlari:</b> Foydalanuvchining joylashuviga qarab tegishli sana va raqam formatlaridan foydalaning. Masalan, sanalar AQShda MM/DD/YYYY, boshqa ko'plab mamlakatlarda esa DD/MM/YYYY formatida bo'lishi mumkin. Xuddi shunday, raqam formatlari turli o'nlik va minglik ajratgichlardan foydalanishi mumkin.</li>
  <li><b>Vaqt Mintaqalari:</b> Agar sizning shaklingiz rejalashtirish yoki vaqtga sezgir ma'lumotlarni o'z ichiga olsa, vaqt mintaqalariga e'tibor bering. Foydalanuvchilarga o'z vaqt mintaqalarini tanlash va vaqtlarni shunga mos ravishda o'zgartirish imkoniyatini bering.</li>
  <li><b>Manzil Formatlari:</b> Manzil formatlari mamlakatlar bo'ylab sezilarli darajada farq qiladi. Turli xil manzil tuzilmalariga mos keladigan moslashuvchan manzil maydonlarini taqdim eting.</li>
  <li><b>Foydalanish Imkoniyati (Accessibility):</b> Shakllaringiz nogironligi bo'lgan foydalanuvchilar uchun ham ochiq ekanligiga ishonch hosil qiling. Semantik HTML elementlaridan foydalaning, tasvirlar uchun alternativ matn taqdim eting va shakllaringiz klaviatura orqali boshqarilishi mumkinligini ta'minlang.</li>
  <li><b>Valyuta Formatlari:</b> Agar siz pul qiymatlari bilan ishlayotgan bo'lsangiz, valyutani foydalanuvchining joylashuviga qarab to'g'ri formatlang. Foydalanuvchiga tanish bo'lgan valyuta belgilari va formatlash qoidalaridan foydalaning. Masalan, AQShda siz "$1,234.56" dan foydalansangiz, Germaniyada "1.234,56 €" dan foydalanishingiz mumkin.</li>
  <li><b>Madaniy Sezgirlik:</b> Shakl dizayniga ta'sir qilishi mumkin bo'lgan madaniy farqlardan xabardor bo'ling. Masalan, ma'lum ranglar yoki belgilar turli madaniyatlarda turli xil ma'nolarga ega bo'lishi mumkin.</li>
</ul>

<p><b>Misol: Xalqaro Manzil Shakli</b></p>

<p>Oddiy manzil shakli AQSh uslubidagi manzilni nazarda tutishi mumkin. Global miqyosda ongli shakl ko'proq moslashuvchanlikni talab qiladi.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
 <form>
  <label for="address1">Manzil qatori 1:</label>
  <input type="text" id="address1" name="address1"><br><br>

  <label for="address2">Manzil qatori 2 (Ixtiyoriy):</label>
  <input type="text" id="address2" name="address2"><br><br>

  <label for="city">Shahar:</label>
  <input type="text" id="city" name="city"><br><br>

  <label for="state">Shtat/Viloyat:</label>
  <input type="text" id="state" name="state"><br><br>

  <label for="postalCode">Pochta indeksi:</label>
  <input type="text" id="postalCode" name="postalCode"><br><br>

  <label for="country">Mamlakat:</label>
  <select id="country" name="country">
   <option value="USA">Qo'shma Shtatlar</option>
   <option value="CAN">Kanada</option>
   {/* Ko'proq mamlakat variantlari */}
  </select><br><br>

  <input type="submit" value="Yuborish">
 </form>
</code>
            <div class="copy-button-container">
              <button 
                data-code="CiA8Zm9ybT4KICA8bGFiZWwgZm9yPSJhZGRyZXNzMSI+TWFuemlsIHFhdG9yaSAxOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJhZGRyZXNzMSIgbmFtZT0iYWRkcmVzczEiPjxicj48YnI+CgogIDxsYWJlbCBmb3I9ImFkZHJlc3MyIj5NYW56aWwgcWF0b3JpIDIgKEl4dGl5b3JpeSk6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImFkZHJlc3MyIiBuYW1lPSJhZGRyZXNzMiI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iY2l0eSI+U2hhaGFyOjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJjaXR5IiBuYW1lPSJjaXR5Ij48YnI+PGJyPgoKICA8bGFiZWwgZm9yPSJzdGF0ZSI+U2h0YXQvVmlsb3lhdDo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ic3RhdGUiIG5hbWU9InN0YXRlIj48YnI+PGJyPgoKICA8bGFiZWwgZm9yPSJwb3N0YWxDb2RlIj5Qb2NodGEgaW5kZWtzaTo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0icG9zdGFsQ29kZSIgbmFtZT0icG9zdGFsQ29kZSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iY291bnRyeSI+TWFtbGFrYXQ6PC9sYWJlbD4KICA8c2VsZWN0IGlkPSJjb3VudHJ5IiBuYW1lPSJjb3VudHJ5Ij4KICAgPG9wdGlvbiB2YWx1ZT0iVVNBIj5RbydzaG1hIFNodGF0bGFyPC9vcHRpb24+CiAgIDxvcHRpb24gdmFsdWU9IkNBTiI+S2FuYWRhPC9vcHRpb24+CiAgIHsvKiBLbydwcm9xIG1hbWxha2F0IHZhcmlhbnRsYXJpICovfQogIDwvc2VsZWN0Pjxicj48YnI+CgogIDxpbnB1dCB0eXBlPSJzdWJtaXQiIHZhbHVlPSJZdWJvcmlzaCI+CiA8L2Zvcm0+Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Global foydalanish uchun yaxshilanishlar:</b></p>

<ul>
 <li>Keng qamrovli mamlakatlar ro'yxatidan foydalaning.</li>
 <li>Mamlakat tanloviga asoslangan dinamik manzil maydonini sozlashni ko'rib chiqing (manzil formati validatsiyasi uchun kutubxona yoki API yordamida).</li>
 <li>3 yoki undan ortiq manzil qatoriga ruxsat bering, chunki ba'zi mamlakatlar juda aniq manzil formatlashni talab qiladi.</li>
 <li>"Shtat/Viloyat/Mintaqa" va "Pochta indeksi/ZIP kod" ni xalqaro miqyosda ishlaydigan aniq yorliqlar bilan alohida maydonlarga ajrating.</li>
</ul>

<h2><code>experimental_useFormStatus</code>dan foydalanish bo'yicha eng yaxshi amaliyotlar</h2>

<ul>
  <li><b>Server Actionsni Oddiy Saqlang:</b> Server Actionsni ma'lumotlarni qayta ishlashga qaratilgan holda saqlashga intiling va harakatning o'zida murakkab UI yangilanishlaridan qoching. Mijoz komponentidagi UI ni yangilash uchun <code>experimental_useFormStatus</code> tomonidan qaytarilgan <code>data</code> xususiyatiga tayaning.</li>
  <li><b>Xatolarni Ehtiyotkorlik bilan Qayta Ishlang:</b> Mumkin bo'lgan istisnolarni ushlash uchun Server Actions ichida mustahkam xatolarni qayta ishlashni amalga oshiring. Foydalanuvchiga ma'lumot beruvchi xato xabarlarini ko'rsatish uchun <code>error</code> xususiyatidan foydalaning.</li>
  <li><b>Aniq Fik-mulohaza Taqdim Eting:</b> Shakl yuborilayotganda foydalanuvchiga aniq fikr-mulohaza berish uchun <code>pending</code> xususiyatidan foydalaning (masalan, yuborish tugmasini o'chirish, yuklanish indikatorini ko'rsatish).</li>
  <li><b>Ishlash Samaradorligini Optimallashtiring:</b> Ayniqsa, katta shakllar yoki murakkab Server Actions bilan ishlaganda, ishlash samaradorligiga e'tibor bering. Ilovangizning ishlashini optimallashtirish uchun memoizatsiya va kodni bo'lish kabi usullardan foydalaning.</li>
  <li><b>Foydalanish Imkoniyatini (Accessibility) Hisobga Oling:</b> Shakllaringiz barcha foydalanuvchilar, shu jumladan nogironligi bo'lganlar uchun ham ochiq ekanligiga ishonch hosil qiling. Foydalanish imkoniyati bo'yicha ko'rsatmalarga rioya qiling va shakllaringizni sinab ko'rish uchun yordamchi texnologiyalardan foydalaning.</li>
</ul>

<h2><code>experimental_useFormStatus</code>ga alternativlar</h2>

<p><code>experimental_useFormStatus</code> shakl holatini boshqarishning qulay usulini taqdim etsa-da, siz ko'rib chiqishingiz mumkin bo'lgan muqobil yondashuvlar mavjud:</p>

<ul>
  <li><b>Maxsus Holatni Boshqarish:</b> Siz shakl holatini Reactning o'rnatilgan holatni boshqarish xususiyatlari (masalan, <code>useState</code>, <code>useReducer</code>) yordamida qo'lda boshqarishingiz mumkin. Bu yondashuv ko'proq moslashuvchanlikni ta'minlaydi, lekin ko'proq shablon kod talab qiladi.</li>
  <li><b>Shakl Kutubxonalari:</b> Formik, React Hook Form va Final Form kabi shakl kutubxonalari validatsiya, yuborishni qayta ishlash va holatni boshqarishni o'z ichiga olgan keng qamrovli shakl boshqaruvi yechimlarini taqdim etadi.</li>
  <li><b>Uchinchi Tomon Holat Boshqaruvi Kutubxonalari:</b> Redux, Zustand va Recoil kabi holat boshqaruvi kutubxonalari shakl holatini markazlashtirilgan tarzda boshqarish uchun ishlatilishi mumkin. Bu yondashuv murakkab holat boshqaruvi talablariga ega bo'lgan katta ilovalar uchun mos keladi.</li>
</ul>

<p>Yondashuv tanlovi ilovangizning o'ziga xos talablariga bog'liq. <code>experimental_useFormStatus</code> ayniqsa React Server Komponentlaridan foydalanadigan va shakl holatini boshqarishning oddiy va deklarativ usulini talab qiladigan ilovalar uchun juda mos keladi.</p>

<h2>Xulosa</h2>

<p><code>experimental_useFormStatus</code> dinamik va sezgir shakllar yaratish uchun React vositalar to'plamiga qimmatli qo'shimcha hisoblanadi. Shakl holatini boshqarishning markazlashtirilgan va deklarativ usulini taqdim etish orqali, bu hook asinxron shakllarni qayta ishlashni soddalashtiradi, foydalanuvchi tajribasini yaxshilaydi va xatolarni qayta ishlashni kuchaytiradi. U hali ham eksperimental API bo'lsa-da, <code>experimental_useFormStatus</code> Reactda, ayniqsa React Server Komponentlari kontekstida, shakllarni boshqarish uchun istiqbolli yo'nalishni ifodalaydi. Uning xususiyatlari, afzalliklari va eng yaxshi amaliyotlarini tushunib, dasturchilar global auditoriya uchun yanada mustahkam va foydalanuvchiga qulay shakllar yaratish uchun ushbu hookdan foydalanishlari mumkin.</p>

<p>Har qanday eksperimental xususiyatda bo'lgani kabi, so'nggi o'zgarishlardan xabardor bo'lish va u barqaror versiyaga o'tish jarayonida yuzaga kelishi mumkin bo'lgan API o'zgarishlariga tayyor bo'lish juda muhim. Biroq, <code>experimental_useFormStatus</code>ning asosiy tamoyillari va afzalliklari dolzarb bo'lib qolishi ehtimoli katta, bu esa uni o'rganish va React ishlab chiqish jarayoniga kiritishga arziydigan vositaga aylantiradi.</p></div><template id="P:4"></template></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimental_useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">shakl holati</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">shaklni boshqarish</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Komponentlari</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">foydalanuvchi tajribasi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">shaklni yuborish</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asinxron shakllar</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiv takomillashtirish</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>